<template>
  <div class="box">
    <div class="SystemParameter">
      <div class="Title">
        <div>
          <div></div>
          <div>参数设置</div>
        </div>
        <div><el-button size="mini" type="warning" @click="QueryTitle" :disabled=getUser>保存</el-button></div>
      </div>
      <div class="Content1">
        <div>
          <div>系统名称</div>
          <div><input type="text" :disabled=getUser v-model="SystemNames" /></div>
        </div>

        <div>
          <div>开发单位</div>
          <div><input type="text" :disabled=getUser v-model="Developmentunit" /></div>
        </div>

        <div>
          <div>使用单位</div>
          <div><input type="text" :disabled=getUser v-model="Playunit" /></div>
        </div>
      </div>
    </div>

    <div class="SystemParameter3">
      <div class="Title">
        <div>
          <div></div>
          <div>变量存储周期</div>
        </div>
        <div><el-button size="mini" :disabled=getUser type="warning">保存</el-button></div>
      </div>
      <div class="Content1">
        <div>
          <div>离层变化阈值</div>
          <div><input type="text" :disabled=getUser /></div>
        </div>

        <div>
          <div>锚杆变化阈值</div>
          <div><input type="text" :disabled=getUser /></div>
        </div>
        <div>
          <div>钻孔变化阈值</div>
          <div><input type="text" :disabled=getUser /></div>
        </div>
        <div>
          <div>温度变化阈值</div>
          <div><input type="text" :disabled=getUser /></div>
        </div>
        <div>
          <div>周期储蓄(分)</div>
          <div><input type="text" :disabled=getUser /></div>
        </div>
      </div>
    </div>

    <div class="SystemParameter2">
      <div class="Title">
        <div>
          <div></div>
          <div>柱状图警戒线设置</div>
        </div>
        <div><el-button size="mini" type="warning" :disabled=getUser @click="BarChartLines">保存</el-button></div>
      </div>
      <div class="Content">
        <div v-if="false" class="Content_input">
          <div>顶板离层</div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.RoofPolice" placeholder="设置报警值" /></div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.RoofWarning" placeholder="设置预警值" /></div>
        </div>

        <div v-if="false">
          <div>锚杆应力</div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.BoltPolice" placeholder="设置报警值" /></div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.BoltWarning" placeholder="设置预警值" /></div>
        </div>

        <div v-if="false">
          <div>钻孔应力</div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.DrillPolice" placeholder="设置报警值" /></div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.DrillWarning" placeholder="设置预警值" /></div>
        </div>

        <div v-if="false">
          <div>锚索应力</div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.AnchorCablePolice" placeholder="设置报警值" /></div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.AnchorCableWarning" placeholder="设置预警值" />
          </div>
        </div>

        <div>
          <div>顶底板位移</div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.DisplacementPolice" placeholder="设置报警值" />
          </div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.DisplacementWarning" placeholder="设置预警值" />
          </div>
        </div>

        <div>
          <div>应变传感器</div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.YingBianBaoJing" placeholder="设置报警值" />
          </div>
          <div><input type="text" :disabled=getUser v-model="ZhuZhuangTu.YingBianYuJing" placeholder="设置预警值" />
          </div>
        </div>


      </div>
    </div>

    <div class="SystemParameter4">
      <div class="Title">
        <div>
          <div></div>
          <div>通讯测试</div>
        </div>
        <div><el-button size="mini" :disabled=getUser type="warning">生成报表</el-button></div>
      </div>
      <div class="Content">
        <div>
          <div>下位机服务器</div>
          <div><el-button size="mini" :disabled=getUser type="primary" @click="IpClick">点击测试</el-button></div>
        </div>

        <div>
          <div>报表生成时间</div>
          <div>
            <div class="block">
              <el-date-picker size="mini" :disabled=getUser v-model="riqi" type="datetimerange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="SystemParameter5">
      <div class="Title">
        <div>
          <div></div>
          <div>上位机ip与端口号配置</div>
        </div>
        <div><el-button size="mini" :disabled=getUser type="warning">保存</el-button></div>
      </div>
      <div class="Content1">
        <div>
          <div>IP</div>
          <div><input type="text" :disabled=getUser /></div>
        </div>

        <div>
          <div>端口号</div>
          <div><input type="text" :disabled=getUser /></div>
        </div>
      </div>
    </div>


    <div class="SystemParameter6">
      <div class="Title">
        <div>
          <div></div>
          <div>保存手机号</div>
        </div>
        <div><el-button size="mini" @click="HanTextMessage" :disabled=getUser type="warning">保存</el-button></div>
      </div>
      <div class="Content1">
        <div>
          <div>手机号</div>
          <div><el-input type="textarea" show-word-limit placeholder="请输入内容" v-model="TextMessage" :disabled=getUser />
          </div>

        </div>

        <div>*注：必填,全局号码格式(包含国家码),示例:+86151****6789,多个号码之间用英文逗号分隔</div>


      </div>
    </div>
  </div>
</template>

<script>
import { addcellPhoneNumber, WbeTitleList, WedTitleAdd, xiaweiji, ZhuZhuangTuShuJuList, ZhuZhuangTuShuJuAdd } from "../../https/api/user";
export default {
  data() {
    return {
      riqi: "",
      SystemNames: "",
      Developmentunit: "",
      Playunit: "",
      ZhuZhuangTu: {
        RoofPolice: '0',
        RoofWarning: '0',
        BoltPolice: '0',
        BoltWarning: '0',
        DrillPolice: '0',
        DrillWarning: '0',
        AnchorCablePolice: '0',
        AnchorCableWarning: '0',
        DisplacementPolice: '0',
        DisplacementWarning: '0',
        YingBianBaoJing: '0',
        YingBianYuJing: '0',
      },
      getUser: null,
      TextMessage: '',

    };
  },
  mounted() {
    this.QueryWedTitleList();
    this.OnBarChartLines();
    this.getUser = localStorage.getItem('User') == 'admin' ? false : true
    // console.log( this.getUser);
  },
  methods: {
    HanTextMessage() {
      const data = {
        numbers: this.TextMessage
      }
      addcellPhoneNumber(data).then(res => {
        // this.OnBarChartLines();
        console.log('保存手机号');
      })
    },
    QueryWedTitleList() {
      WbeTitleList().then((res) => {
        console.log("获取标题", res);
        if (res) {
          this.SystemNames = res[0].SystemNames;
          this.Developmentunit = res[0].Developmentunit;
          this.Playunit = res[0].Playunit;
        }
      });
    },
    QueryTitle() {
      const data = {
        SystemNames: this.SystemNames,
        Developmentunit: this.Developmentunit,
        Playunit: this.Playunit,
        CewenMax: '1',
        CewenMin: '1',
        ZhendongMax: '1',
        ZhendongMin: '1',
      }
      WedTitleAdd(data).then(res => {
        console.log('标题添加', res);

        this.$message({
          message: '添加成功',
          type: 'success'
        });

      })
    },
    IpClick() {
      xiaweiji().then(res => {
        console.log('点击下位机测试', res);
        if (res) {
          this.$message({
            message: res,
            type: 'success'
          });
        }
      })
    },
    OnBarChartLines() {
      ZhuZhuangTuShuJuList().then(res => {
        console.log('柱状图报警and预警111', res);
        this.ZhuZhuangTu.RoofPolice = res[0].RoofSeparationBaoJing
        this.ZhuZhuangTu.RoofWarning = res[0].RoofSeparationYuJing

        this.ZhuZhuangTu.BoltPolice = res[0].BoltStressBaoJing
        this.ZhuZhuangTu.BoltWarning = res[0].BoltStressYuJing

        this.ZhuZhuangTu.DrillPolice = res[0].BoreholeStressBaoJing
        this.ZhuZhuangTu.DrillWarning = res[0].BoreholeStressYuJing

        this.ZhuZhuangTu.AnchorCablePolice = res[0].CableStressBaoJing
        this.ZhuZhuangTu.AnchorCableWarning = res[0].CablestressYuJing

        this.ZhuZhuangTu.DisplacementPolice = res[0].RoofdisplacementBaoJing
        this.ZhuZhuangTu.DisplacementWarning = res[0].RoofdisplacementYuJing


        this.ZhuZhuangTu.YingBianYuJing = res[0].YBYuJing
        this.ZhuZhuangTu.YingBianBaoJing = res[0].YBBaoJing

        this.TextMessage = res[0].receiver
      })
    },
    BarChartLines() {
      const data = {
        RoofSeparationBaoJing: this.ZhuZhuangTu.RoofPolice,
        RoofSeparationYuJing: this.ZhuZhuangTu.RoofWarning,

        BoltStressBaoJing: this.ZhuZhuangTu.BoltPolice,
        BoltStressYuJing: this.ZhuZhuangTu.BoltWarning,

        BoreholeStressBaoJing: this.ZhuZhuangTu.DrillPolice,
        BoreholeStressYuJing: this.ZhuZhuangTu.DrillWarning,

        CablestressYuJing: this.ZhuZhuangTu.AnchorCablePolice,
        CableStressBaoJing: this.ZhuZhuangTu.AnchorCableWarning,

        RoofdisplacementBaoJing: this.ZhuZhuangTu.DisplacementPolice,
        RoofdisplacementYuJing: this.ZhuZhuangTu.DisplacementWarning,

        YBYuJing: this.ZhuZhuangTu.YingBianYuJing,
        YBBaoJing: this.ZhuZhuangTu.YingBianBaoJing,
      }
      ZhuZhuangTuShuJuAdd(data).then(res => {
        console.log('保存柱状图报警and预警');
      })
    }
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  padding: 30px 20px;
  display: flex;
  flex-wrap: wrap;

  .SystemParameter {
    width: 520px;
    height: 320px;
    border: 2px solid rgb(46, 99, 160);
    background-color: rgb(27, 61, 106);
    margin-right: 20px;
    margin-bottom: 20px;

    .Title {
      width: 100%;
      height: 15%;
      border-bottom: 2px solid rgb(46, 99, 160);
      display: flex;
      align-items: center;

      >div:nth-child(1) {
        width: 50%;
        display: flex;
        align-items: center;
        padding: 0 10px;

        >div:nth-child(1) {
          width: 20px;
          height: 20px;
          background-color: rgb(53, 130, 217);
          background-image: url("../../assets/参数.png");
          // background-image: url("../../assets/短信.png");
          background-size: 70% 70%;
          background-position: center center;
          border-radius: 50%;
          background-repeat: no-repeat;
        }

        >div:nth-child(2) {
          color: white;
          margin-left: 5px;
          font-size: 14px;
        }
      }

      >div:nth-child(2) {
        width: 50%;
        text-align: right;
        padding: 0 10px;
      }
    }


    .Content {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

        >div:nth-child(3) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }


        }
      }
    }

    .Content1 {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 70%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

      }
    }
  }

  .SystemParameter1 {
    width: 520px;
    height: 320px;
    border: 2px solid rgb(46, 99, 160);
    background-color: rgb(27, 61, 106);
    margin-right: 20px;
    margin-bottom: 20px;

    .Title {
      width: 100%;
      height: 15%;
      border-bottom: 2px solid rgb(46, 99, 160);
      display: flex;
      align-items: center;

      >div:nth-child(1) {
        width: 50%;
        display: flex;
        align-items: center;
        padding: 0 10px;

        >div:nth-child(1) {
          width: 20px;
          height: 20px;
          background-color: rgb(53, 130, 217);
          // background-image: url("../../assets/SytemPatrameter/参数设置.png");
          background-image: url("../../assets/短信.png");
          background-size: 70% 70%;
          background-position: center center;
          border-radius: 50%;
          background-repeat: no-repeat;
        }

        >div:nth-child(2) {
          color: white;
          margin-left: 5px;
          font-size: 14px;
        }
      }

      >div:nth-child(2) {
        width: 50%;
        text-align: right;
        padding: 0 10px;
      }
    }

    .Content {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

        >div:nth-child(3) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }
      }
    }

    .Content1 {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 70%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

      }
    }
  }

  .SystemParameter2 {
    width: 520px;
    height: 320px;
    border: 2px solid rgb(46, 99, 160);
    background-color: rgb(27, 61, 106);
    margin-right: 20px;
    margin-bottom: 20px;

    .Title {
      width: 100%;
      height: 15%;
      border-bottom: 2px solid rgb(46, 99, 160);
      display: flex;
      align-items: center;

      >div:nth-child(1) {
        width: 50%;
        display: flex;
        align-items: center;
        padding: 0 10px;

        >div:nth-child(1) {
          width: 20px;
          height: 20px;
          background-color: rgb(53, 130, 217);
          // background-image: url("../../assets/SytemPatrameter/参数设置.png");
          background-image: url("../../assets/竖状图.png");
          background-size: 70% 70%;
          background-position: center center;
          border-radius: 50%;
          background-repeat: no-repeat;
        }

        >div:nth-child(2) {
          color: white;
          margin-left: 5px;
          font-size: 14px;
        }
      }

      >div:nth-child(2) {
        width: 50%;
        text-align: right;
        padding: 0 10px;
      }
    }

    .Content {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

        >div:nth-child(3) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }
      }
    }

    .Content1 {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 70%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

      }
    }
  }

  .SystemParameter3 {
    width: 520px;
    height: 320px;
    border: 2px solid rgb(46, 99, 160);
    background-color: rgb(27, 61, 106);
    margin-right: 20px;
    margin-bottom: 20px;

    .Title {
      width: 100%;
      height: 15%;
      border-bottom: 2px solid rgb(46, 99, 160);
      display: flex;
      align-items: center;

      >div:nth-child(1) {
        width: 50%;
        display: flex;
        align-items: center;
        padding: 0 10px;

        >div:nth-child(1) {
          width: 20px;
          height: 20px;
          background-color: rgb(53, 130, 217);
          // background-image: url("../../assets/SytemPatrameter/参数设置.png");
          background-image: url("../../assets/时间周期.png");
          background-size: 70% 70%;
          background-position: center center;
          border-radius: 50%;
          background-repeat: no-repeat;
        }

        >div:nth-child(2) {
          color: white;
          margin-left: 5px;
          font-size: 14px;
        }
      }

      >div:nth-child(2) {
        width: 50%;
        text-align: right;
        padding: 0 10px;
      }
    }

    .Content {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

        >div:nth-child(3) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }
      }
    }

    .Content1 {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 70%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

      }
    }
  }

  .SystemParameter4 {
    width: 520px;
    height: 320px;
    border: 2px solid rgb(46, 99, 160);
    background-color: rgb(27, 61, 106);
    margin-right: 20px;
    margin-bottom: 20px;

    .Title {
      width: 100%;
      height: 15%;
      border-bottom: 2px solid rgb(46, 99, 160);
      display: flex;
      align-items: center;

      >div:nth-child(1) {
        width: 50%;
        display: flex;
        align-items: center;
        padding: 0 10px;

        >div:nth-child(1) {
          width: 20px;
          height: 20px;
          background-color: rgb(53, 130, 217);
          // background-image: url("../../assets/SytemPatrameter/参数设置.png");
          background-image: url("../../assets/通讯录.png");
          background-size: 70% 70%;
          background-position: center center;
          border-radius: 50%;
          background-repeat: no-repeat;
        }

        >div:nth-child(2) {
          color: white;
          margin-left: 5px;
          font-size: 14px;
        }
      }

      >div:nth-child(2) {
        width: 50%;
        text-align: right;
        padding: 0 10px;
      }
    }

    .Content {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

        >div:nth-child(3) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }
      }
    }

    .Content1 {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 70%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

      }
    }
  }

  .SystemParameter5 {
    width: 520px;
    height: 320px;
    border: 2px solid rgb(46, 99, 160);
    background-color: rgb(27, 61, 106);
    margin-right: 20px;
    margin-bottom: 20px;
    // border: 1px solid red;

    .Title {
      width: 100%;
      height: 15%;
      border-bottom: 2px solid rgb(46, 99, 160);
      display: flex;
      align-items: center;

      >div:nth-child(1) {
        width: 50%;
        display: flex;
        align-items: center;
        padding: 0 10px;

        >div:nth-child(1) {
          width: 20px;
          height: 20px;
          background-color: rgb(53, 130, 217);
          // background-image: url("../../assets/SytemPatrameter/参数设置.png");
          background-image: url("../../assets/IP.png");
          background-size: 70% 70%;
          background-position: center center;
          border-radius: 50%;
          background-repeat: no-repeat;
        }

        >div:nth-child(2) {
          color: white;
          margin-left: 5px;
          font-size: 14px;
        }
      }

      >div:nth-child(2) {
        width: 50%;
        text-align: right;
        padding: 0 10px;
      }
    }

    .Content {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

        >div:nth-child(3) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }
      }
    }

    .Content1 {
      width: 100%;
      height: 85%;

      // border: 1px solid red;

      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 70%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }

          .el_input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }



        }

      }
    }
  }

  .SystemParameter6 {
    width: 520px;
    height: 320px;
    border: 2px solid rgb(46, 99, 160);
    background-color: rgb(27, 61, 106);
    margin-right: 20px;
    margin-bottom: 20px;
    // border: 1px solid red;

    .Title {
      width: 100%;
      height: 15%;
      border-bottom: 2px solid rgb(46, 99, 160);
      display: flex;
      align-items: center;

      >div:nth-child(1) {
        width: 50%;
        display: flex;
        align-items: center;
        padding: 0 10px;

        >div:nth-child(1) {
          width: 20px;
          height: 20px;
          background-color: rgb(53, 130, 217);
          // background-image: url("../../assets/SytemPatrameter/参数设置.png");
          background-image: url("../../assets/IP.png");
          background-size: 70% 70%;
          background-position: center center;
          border-radius: 50%;
          background-repeat: no-repeat;
        }

        >div:nth-child(2) {
          color: white;
          margin-left: 5px;
          font-size: 14px;
        }
      }

      >div:nth-child(2) {
        width: 50%;
        text-align: right;
        padding: 0 10px;
      }
    }

    .Content {
      width: 100%;
      height: 85%;

      // border: 1px solid red;
      >div {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;

        >div:nth-child(1) {
          width: 15%;
          color: white;
          font-size: 12px;
          text-align: right;
        }

        >div:nth-child(2) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }

        >div:nth-child(3) {
          width: 40%;
          height: 30px;
          border-radius: 10px;
          margin-left: 10px;

          input {
            border: 2px solid rgb(45, 99, 157);
            background-color: rgb(13, 39, 74);
            width: 100%;
            height: 100%;
            color: white;
            padding: 0 0 0 10px;
          }
        }
      }
    }

    .Content1 {
      width: 100%;
      height: 85%;

      // border: 1px solid red;

      >div:nth-child(1) {
        width: 100%;
        height: 200px;
        display: flex;
        // align-items: center;
        margin-top: 10px;
        // border: 1px solid red;

        >div:nth-child(1) {
          width: 15%;
          height: 30px;
          color: white;
          font-size: 12px;
          text-align: right;
          line-height: 30px;
        }

        >div:nth-child(2) {
          width: 70%;
          height: 200px;
          border-radius: 10px;
          margin-left: 10px;





        }



      }

      >div:nth-child(2) {
        // border: 1px solid red;
        color: red;
        font-size: 12px;
        padding: 20px 20px;
      }
    }
  }



}

/deep/.el-textarea__inner {
  display: block;
  resize: vertical;
  padding: 5px 15px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  font-size: inherit;
  border: 2px solid rgb(45, 99, 157) !important;
  background-color: rgb(13, 39, 74) !important;
  color: white;
  padding: 0 0 0 10px;
  background-image: none;
  border-radius: 4px;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}
</style>